iT邦幫忙

DAY 20
3

入門AngularJS筆記與前端領域的學習筆記分享系列 第 20

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template

  • 分享至 

  • xImage
  •  

ng-bind-template是什麼?

ng-bind-template就是可以把多個model綁成一個群組,再用ng-bind的方法去綁定。

ng-bind、ng-bind-template、ng-cloak都可以解決angularJS檔案來不及被讀取的情況。

但根據使用上較彈性且較為簡單的選擇是:

ng-bind-template>ng-bind>ng-cloak

ng-bind、ng-bind-template、ng-cloak的比較Demo:
http://jsbin.com/aMomUWU/2/edit
網站的讀取順序是

  1. html會先被reader

  2. 再讀取js檔案(其中包含angularJS)。

若網站結構較複雜,載入的library較多時,angularJS檔案來不及被讀取,
在這種情況下,瀏覽器不認得{{ }},而直接顯示{{ }}的原始字串,
為了避免這個錯誤,之前有分享過ng-bind和ng-cloak的使用方法,來解決這項問題。

那麼ng-bind-template是什麼?

ng-bind-template就是可以把多個model綁成一個群組,再用ng-bind的方法去綁定。

簡單的來說,ng-bind和ng-bind-template的差別就是:
ng-bind是單一個model綁定
ng-bind-template可以多個model綁定

ng-bind、ng-bind-template、ng-cloak的比較Demo:
http://jsbin.com/aMomUWU/2/edit

那為什麼不使用ng-cloak?

  1. ng-cloak只能針對網站初步載入時處理(ng-cloak only works for the initial load),無法處理model資料對應不同事件需要變更值的狀況。
  2. 需要另外加入css,用來解決跨瀏覽器的問題。

綜合小結:

  1. ng-bind-template可以同時綁定兩個以上的model。
  2. ng-bind只能綁定一個model。
  3. ng-cloak可以綁定兩個以上的model,但只能在初次載入時設定model值,且需要增加css解決跨瀏覽器的問題。

ng-bind、ng-bind-template、ng-cloak都可以解決angularJS檔案來不及被讀取的情況。

但根據使用上較彈性且較為簡單的選擇是:

ng-bind-template>ng-bind>ng-cloak

ng-bind-template怎麼用?

  1. 在controller裡面,設定初始值

    $scope.salutation = 'Hello';
    $scope.name = 'Anna';

  2. 使用ng-bind-template 綁定一個model的值

  3. 或者使用ng-bind-template 綁定兩個以上model的值

ng-bind、ng-bind-template、ng-cloak的用法比較

ng-bind的用法:

<span ng-bind="name"></span>

ng-bind-template的用法:

<pre ng-bind-template="{{salutation}} {{name}}">

和ng-cloak的用法:

<span ng-cloak class="ng-cloak">{{ name }}</span>

參考資料:
Use Ng-bind in AngularJS
http://www.befundoo.com/blog/use-ng-bind-in-angularjs/

官方文件:
http://docs.angularjs.org/api/ng.directive:ngBindTemplate

官方Demo:
http://jsfiddle.net/api/post/library/pure/

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
http://ithelp.ithome.com.tw/question/10140689

Day29- 入門AngularJS筆記-filter
http://ithelp.ithome.com.tw/question/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
http://ithelp.ithome.com.tw/question/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196


上一篇
Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
下一篇
Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
系列文
入門AngularJS筆記與前端領域的學習筆記分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言